<template>
  <div id="ContactUs">
    <div class="banner container-fuild text-center">客户中心</div>
    <div class="container" v-if="user">
      <div class="center">
        <div class="mt">公司名称:{{ user[0].company }}</div>
        <div class="mt">积分:{{ user[0].jidou }}</div>
      </div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="设备管理" name="first">
          <van-button type="info" class="mt" @click="up_sb" size="mini"
            >上传设备</van-button
          >
          <div style="width:300px">
            <van-search
              v-model="sb_name"
              placeholder="请输入搜索关键词"
              @search="onSearch_sb"
            />
          </div>

          <div class="mt2"></div>

          <el-table :border="true" :data="sb_arr" style="width: 100%">
             <el-table-column label="编号" width="180">
              <template slot-scope="scope">
                <span style="">{{ scope.row.dnum }}</span>
              </template>
            </el-table-column>
            <el-table-column label="名称" width="180">
              <template slot-scope="scope">
                <span style="">{{ scope.row.dname }}</span>
              </template>
            </el-table-column>
            <el-table-column label="规格" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.guge }}</span>
              </template>
            </el-table-column>
            <el-table-column label="校准时间" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.buydate }}</span>
              </template>
            </el-table-column>

            <el-table-column label="状态" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.state == 1 ? "正常" : "其他" }}</span>
              </template>
            </el-table-column>
            <el-table-column label="备注" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.marks }}</span>
              </template>
            </el-table-column>

            <el-table-column label="证书" width="180">
              <template slot-scope="scope">
                <div v-if="scope.row.linkurl">
                  <div
                    v-for="(n, m) in scope.row.newtimg"
                    class="mt"
                    :key="m"
                    @click.stop="open_zs(n)"
                  >
                    {{m}}
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="资料空间" name="second">
          <el-upload
            name="upFile"
            class="upload-demo"
              :action='$base+"/api/index/cusupload" '
           
            :on-change="handleChange"
            multiple
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">上传空间文件</div>
          </el-upload>
          <el-button
            type="primary"
            style="width: 50vw"
            @click="sub_per"
            class="mt2"
            >提交</el-button
          >
          <van-divider>资料列表:</van-divider>
          <div v-for="(i, k) in geren_arr" :key="k" class="mt2">
            <el-link :href="$base + i" target="_blank">{{   i.substr(19,i.length) }}</el-link>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我的收藏" name="third">
          <div style="width:300px">
            <van-search
              v-model="sc_name"
              placeholder="请输入搜索关键词"
              @search="onSearch_sc"
            />
          </div>
          <div v-for="(i, k) in shou_arr" :key="k">
            <van-card
              :desc="timeTrans(i.createtime)"
              :title="i.sname"
              @click="go_shou(i)"
            >
            </van-card>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我的订单" name="fourth">
          <van-empty v-if="order.length == 0" description="暂无数据" />
          <el-divider></el-divider>
          <!-- 订单 -->
           <!-- <div style="width:300px">
            <van-search
              v-model="dd_name"
              placeholder="请输入搜索关键词"
              @search="onSearch_dd"
            />
          </div> -->

          <el-table :border="true" :data="order" style="width: 100%">
            <el-table-column label="类型" width="180">
              <template slot-scope="scope">
                <span style="">{{ scope.row.oname }}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单编号" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.orderid }}</span>
              </template>
            </el-table-column>
            <el-table-column label="价格" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.ordermoney }}</span>
              </template>
            </el-table-column>

            <el-table-column label="进度" width="400">
              <template slot-scope="scope">
                <div
                  v-for="i of JSON.parse(scope.row.currpro)"
                  :key="i"
                  class="mt"
                >
                  <span>{{ i.name }}</span>
                  <span>时间:{{ i.dates }}</span>
                  <span class="ml" style="color: red"
                    >状态:{{ i.progress == 1 ? "完成" : "待完成" }}</span
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column label="文件" width="200">
              <template slot-scope="scope">
                <div v-if="scope.row.timg">
                  <!-- <div
                    v-for="i of scope.row.timg.split(',')"
                    :key="i"
                    class="mt"
                    @click.stop="open_zs(i)"
                  >
                    {{ $base + i }}
                  </div> -->
                   <div
                    v-for="(n, m) in scope.row.newtimg"
                    class="mt"
                    :key="m"
                    @click.stop="open_zs(n)"
                  >
                    {{m}}
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <el-divider></el-divider>
        </el-tab-pane>
        <el-tab-pane label="积分兑换记录" name="five">
          <van-card v-if="jifen_arr.length">
            <template #tags>
              <div v-for="(a, b) of jifen_arr" :key="b" class="mt2">
                <van-cell title="商品名称" :value="a.pnames" />
                <van-cell title="收货姓名" :value="a.sname" />
                <van-cell title="电话" :value="a.phones" />
                <van-cell title="地址" :value="a.address" />
                <van-cell title="备注" :value="a.marks" />
              </div>
            </template>
          </van-card>
        </el-tab-pane>
      </el-tabs>
      <el-divider></el-divider>
    </div>
  </div>
</template>
<script>
import { WOW } from "wowjs";
import { Step, Steps } from "vant";
import BMap from "BMap";
export default {
  name: "Person",
  data() {
    return {
      sc_name:'',
      dd_name:'',
      sb_name: "",
      user: "",
      activeName: "first",
      sb_arr: [],
      sb_img: [],
      fileList: [],
      geren_arr: [],
      shou_arr: [],
      order: [],
      time: [],
      jifen_arr: [],
    };
  },
  mounted() {
    let lg = localStorage.getItem("lg");
    let suer = JSON.parse(localStorage.getItem("user"));
    this.user = suer;
    if (!lg) {
      this.$router.push("/login");
    } else {
      //  this.is_lg=true
    }
    var wow = new WOW();
    wow.init();
    this.get_sb();
    this.get_person();
    this.get_shou();
    this.get_order();
    this.get_class();
    this.get_jifen();
  },
  methods: {
    onSearch_sc(){
      if(!this.sc_name){
        alert('请输入关键词');
        return
      }
      this.get_shou()
    },
    onSearch_dd(){
       if(!this.dd_name){
        alert('请输入关键词');
        return
      }
      this.get_order()

    },
    onSearch_sb(){
      if(!this.sb_name){
        alert('请输入关键词');
        return
      }
      this.get_sb()
    },
    get_jifen() {
      let dd = {
        uid: this.user[0].id,
      };
      let v = this;
      this.http.post("/cusmsg/getjifenmsg", dd).then((res) => {
        console.log("积分明显:", res);
        if (res.data.data) {
          v.jifen_arr = res.data.data;
        }
      });
    },
    open_zs(e) {
      console.log("e:", e);
      window.open(this.$base + e);
    },
    get_class() {
      this.http.post("/cusmsg/getordertype", { pid: 1 }).then((res) => {
        console.log("订单分类:", res);
      });
    },
    timeTrans(date) {
      var date = new Date(date * 1000);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    get_order() {
      let v = this;
      let id = this.user[0].id;
      let data = {
        uid: id,
        oname:this.dd_name
      };
      this.http.post("/cusmsg/getuserproduct", data).then((res) => {
        console.log("订单:", res);
        let dd = res.data.data;
        for (let i of dd) {
          let tt = v.timeTrans(i.createtime);
          v.time.push(tt);
          let currpro = JSON.parse(i.currpro);
          console.log("currpro:", currpro, i.currpro);
        }

        if (res.data.data) {
          v.order = res.data.data;
        }
      });
    },
    go_shou(e) {
      this.$router.push({ path: "/product", query: { ss: e } });
    },
    timeTrans(date) {
      var date = new Date(date * 1000);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    get_shou() {
      let data = {
        uid: this.user[0].id,
        pname:this.sc_name,
      };
      let v = this;
      this.http.post("/products/getsavemsg", data).then((res) => {
        console.log("22:", res);
        if (res.data.data) {
          v.shou_arr = res.data.data;
        }
      });
    },
    sub_per() {
      if (!this.fileList.length) {
        alert("请上传文件");
        return;
      }
      let ff = this.fileList;
      let f_arr = [];
      if (ff.length) {
        for (let i in ff) {
          f_arr.push(ff[i].response.data);
        }
      } else {
        f_arr = "";
      }

      let data = {
        uid: this.user[0].id,
        urls: f_arr.length ? f_arr.toString() : "",
      };
      let v = this;
      this.http.post("/cusmsg/getuserpost", data).then((res) => {
        console.log("上传个人文件:", res);
        alert(res.data.msg);
        if (res.data.code == 1) {
          v.get_person();
        }
      });
    },
    get_person() {
      let data = {
        uid: this.user[0].id,
      };
      let v = this;
      this.http.post("/cusmsg/getuserinfo", data).then((res) => {
        console.log("个人资料:", res);
        if (res.data.data) {
          // v.geren_arr=res.data.data;
          let aa = res.data.data;
          let dd = [];
          for (let i of aa) {
            let cc = i.personal.split(",");
            console.log("cc:", cc);
            for (let j of cc) {
              dd.push(j);
            }
          }
          console.log("dd:", dd);
          v.geren_arr = dd;
        }
      });
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
      console.log("666:", fileList);
    },
    up_sb() {
      this.$router.push("/upload");
    },
    go_xun() {
      this.$router.push("/contactus");
    },
    get_sb() {
      let v = this;
      let data={
        uid:  this.user[0].id,
        pagesize:'100',
        page:1,
        dnames:''
      };
      //  let data={
      //    'type':4
      //  };
      //  this.http.post('products/getproductlei',data).then(res=>{
      //    console.log('设备:',res)
      //  })
      this.http.post("/products/getdeviceinfo",data).then((res) => {
        console.log("设备列表:", res);
        if (res.data.data) {
          v.sb_arr = res.data.data;
         
        }
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style scoped>
.center {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  flex-direction: column;
}
.banner {
  color: #fff;
  font-size: 30px;
  height: 150px;
  line-height: 150px;
  background-image: url("../assets/img/banner_1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
.ContactUs-container {
  padding: 80px 0;
  transition: all ease 0.5s;
  box-sizing: border-box;
}
#map {
  width: 100%;
  height: 365px;
}
.row {
  margin-right: 0;
  margin-left: 0;
}
@media screen and (max-width: 997px) {
  .ContactUs-container {
    padding: 20px 0;
  }
}
</style>

